
/* 
  高性能组件
  1. PureComponent 应用在类组件上面
  2. memo 应用在函数式组件上面

*/
import React, { Component, PureComponent } from 'react';

// https://zh-hans.reactjs.org/docs/react-api.html#reactpurecomponent


/* PureComponent 应用在类组件上面 */
/* class Demo extends PureComponent{
  render(){
    return <h1>Demo组件{this.props.msg}</h1>
  }
  componentDidUpdate(){
    console.log("组件更新好了")
  }
 
} */

/* 函数式组件 */
/* function  Demo(props) {
  console.log("Demo 组件渲染了")
  return <h1>Demo组件{props.msg}</h1>
} */

/* memo 应用在函数式组件上面 */
const DemoWithMemo = React.memo(function Demo(props){
  console.log("Demo 组件渲染了")
  return <h1>Demo组件{props.msg}</h1>
})


class App extends Component {
  state = {
    msg:"牛"
  }
  handleClick = () =>{
    this.setState({
      msg:"猪"
    })
  }
  render() {
    return (
      <div>
        {/* PureComponent 写子组件方式 */}
        {/* <Demo msg={this.state.msg}></Demo> */}

        {/* memo 写子组件方式 */}
        <DemoWithMemo msg={this.state.msg}></DemoWithMemo>
        <button onClick={this.handleClick}>改变牛</button>
      </div>
    );
  }
}

export default App;
